<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>用药方案</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="../css/bootstrap.css">
    <link rel="stylesheet" href="../css/style.css">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="../js/bootstrap.min.js"></script>
    <script src="../js/echarts.js"></script>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script type="text/javascript">
        $(window).on('load', function () {
            // 此设置可消除页面的多个滚动条
            $('#iframe', parent.document).css("height", "1600px");

        });


    </script>

</head>

<body>
<div class="container drug_plan">
    <form name="frm-sample" class="frm-sample" action="try" method="post">

        <br>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">患者信息</h3>
            </div>
            <div class="panel-body body-p">

                <div class="form-horizontal">
                    <div class="form-group form-a">

                        <div class="col-md-3">
                            <label class="col-md-4 control-label">姓名:</label>
                            <div class="col-md-8 col41">
                                <p class="form-control-static" th:text="${plan.name}"></p>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <label class="col-md-4 control-label">性别:</label>
                            <div class="col-md-8 col41">
                                <p class="form-control-static" th:text="${plan.sex}"></p>
                                <!--<label class="radio-inline">-->
                                <!--<input type="radio" th:field="*{plan.sex}" value="男" name="sex">男-->
                                <!--</label>-->
                                <!--<label class="radio-inline">-->
                                <!--<input type="radio" th:field="*{plan.sex}" value="女" name="sex">女-->
                                <!--</label>-->
                            </div>
                        </div>
                        <div class="col-md-3">
                            <label class="col-md-4 control-label">年龄:</label>
                            <div class="col-md-8 col41">
                                <p class="form-control-static" th:text="${plan.age}"></p>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <label class="col-md-4 control-label">体重:</label>
                            <div class="col-md-8 col41">
                                <p class="form-control-static" th:text="${plan.weight}"></p>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">用药方案</h3>
            </div>
            <div class="panel-body body-p">

                <div class="form-horizontal">
                    <div class="form-group">
                        <div class="col-md-4">
                            <label class="col-md-4 control-label">药物名称:</label>
                            <div class="col-md-8 col41">
                                <p class="form-control-static" th:text="${plan.drugPlan.drugName}"></p>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <label class="col-md-4 control-label">给药方式:</label>
                            <div class="col-md-8 col41">
                                <p class="form-control-static" th:text="${plan.drugPlan.deliWay}"></p>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <label class="col-md-4 control-label">负荷剂量:</label>
                            <div class="col-md-8 col41">
                                <p class="form-control-static" th:text="${plan.drugPlan.loadDose}"></p>
                            </div>
                        </div>

                    </div>
                    <div class="form-group">
                        <div class="col-md-4">
                            <label class="col-md-4 control-label">维持剂量:</label>
                            <div class="col-md-8 col41">
                                <p class="form-control-static" th:text="${plan.drugPlan.mainDose}"></p>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <label class="col-md-4 control-label">给药间隔:</label>
                            <div class="col-md-8 col41">
                                <p class="form-control-static" th:text="${plan.drugPlan.inteDeli}"></p>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <label class="col-md-5 control-label">用药持续时间:</label>
                            <div class="col-md-7 col41">
                                <p class="form-control-static" th:text="${plan.drugPlan.contDeli}"></p>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>

        <!-- <br> -->
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">药时曲线</h3>
            </div>
            <div class="panel-body">
                <div class="row">
                    <div id="echart" style="width: 1000px;height: 400px;">

                        <!--<img src="" id="img1" alt="曲线图正在加载..." th:src="${plan.drugPlan.blImgPath}" width="50%" height="50%">-->
                    </div>
                </div>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">决策流程</h3>
            </div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-md-12">
                        <img src="" alt="曲线图正在加载..." th:src="${plan.deciImgPath}" width="100%" height="100%">
                    </div>
                </div>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">决策规则</h3>
            </div>
            <div class="panel-body">
                <div class="form-horizontal">
                    <div class="form-group">
                        <div class="col-md-12 col15" th:each="rule:${plan.rules}">
                            <label class="col-md-2 control-label col13">决策规则:</label>
                            <div class="col-md-10">
                                <p class="form-control-static" th:text="${rule.deciRule}">

                                </p>
                                <a th:href="${rule.litePath}" target="_blank" title="参考文献" th:text="${rule.liteDesc}"></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </form>
</div>


</body>
<script type="text/javascript">
    var patId = $('#id_select', parent.document).val();
    console.log("patId:" + patId);
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('echart'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            left: 'center',
            text: '浓度时间曲线',
            textStyle: {
                fontSize: 18
            },
            subtext: '稳态血药浓度：13.5 mg/L',
            subtextStyle: {
                fontSize: 12,
                color: '#333',
                fontWeight: 'bold'
            },
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: [{
                name: '药时曲线'
            }, {
                name: '有效血药浓度范围'
            }],
            right: '4%',
            top: '5%'
        },
        grid: {
            left: '3%',
            right: '1%',
            bottom: '8%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            name: '时间（单位：h）',
            nameLocation: 'center',
            nameGap: 25,
            boundaryGap: false,
            data: []
        },
        yAxis: {
            type: 'value',
            name: '血药浓度 (mg/L)',
            nameLocation: 'end',
            nameGap: 10,
            axisLabel: {
                formatter: '{value}'
            }
        },
        series: [{
            name: '药时曲线',
            type: 'line',
            stack: '总量',
            symbol: "none",
            itemStyle: {
                normal: {
                    lineStyle: {
                        color: 'blue'
                    },
                    color: 'blue'
                }

            },
            data: []

        },
        {
            name: '有效血药浓度范围',
            type: 'line',
            symbol: "none",
            itemStyle: {
                normal: {
                    lineStyle: {
                        color: 'red'
                    },
                    color: 'red'
                }
            },
            markLine: {
                symbol: "none",
                data: [{
                    name: '推荐目标浓度上限',
                    yAxis: 15,
                    label: {
                        show: false
                    }
                },
                    {
                        name: '推荐目标浓度下限',
                        yAxis: 10,
                        label: {
                            show: false
                        }
                    }],
                lineStyle: {
                    type: 'solid'
                }

            }

        }

        ]
    };

    // myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画
    myChart.setOption(option);
    if (patId === 1 || patId == '1') {

        var xdata = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10',
            '11', '12', '13', '14', '15', '16', '17', '18', '19', '20',
            '21', '22', '23', '24', '25', '26', '27', '28', '29', '30',
            '31', '32', '33', '34', '35', '36', '37', '38', '39', '40',
            '41', '42', '43', '44', '45', '46', '47', '48', '49', '50',
            '51', '52', '53', '54', '55', '56', '57', '58', '59', '60',
            '61', '62', '63', '64', '65', '66'];
        var ydata = [0, 19.33, 18.63, 17.08, 15.61, 14.27, 13.04, 11.92, 10.89, 9.95, 9.1, 8.31, 26.28, 24.98, 22.88,
            20.91, 19.11, 17.47, 15.96, 14.59, 13.33, 12.19, 11.14, 28.64, 27.13, 24.85, 22.71, 20.76, 18.97, 17.34,
            15.84, 14.48, 13.23, 12.1, 29.44, 27.87, 25.52, 23.32, 21.31, 19.48, 17.8, 16.27, 14.87, 13.59, 12.42,
            29.71, 28.11, 25.74, 23.53, 21.5, 19.65, 17.96, 16.42, 15, 13.71, 12.53, 29.8, 28.2, 25.82, 23.6, 21.57,
            19.71, 18.02, 16.47, 15.05, 13.75, 12.57];
        myChart.setOption({
            title: {
                left: 'center',
                text: '浓度时间曲线',
                textStyle: {
                    fontSize: 18
                },
                subtext: '稳态血药浓度：12.53 mg/L',
                subtextStyle: {
                    fontSize: 12,
                    color: '#333',
                    fontWeight: 'bold'
                },
            },
            xAxis: {
                type: "category",
                boundaryGap: false,
                data: xdata
            },
            //加载数据图表
            series: [{
                // 根据名字对应到相应的系列
                name: '药时曲线',
                data: ydata
            }]
        });

    } else if(patId === 2 || patId == '2') {
        var ydata = [0, 20.94, 19.66, 17.99, 16.44, 15.03, 13.73, 12.55, 20.97, 19.69, 18.02, 16.47, 15.05, 13.76, 12.57, 20.99, 19.7,
            18.03, 16.48, 15.06, 13.77, 12.58, 21, 19.71, 18.04, 16.49, 15.07, 13.77, 12.59, 21, 19.72, 18.04, 16.49, 15.07, 13.78, 12.59,
            21, 19.72, 18.05, 16.49, 15.07, 13.78, 12.59, 21, 19.72, 18.05, 16.49, 15.08, 13.78, 12.59
        ];
        var xdata = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10',
            '11', '12', '13', '14', '15', '16', '17', '18', '19', '20',
            '21', '22', '23', '24', '25', '26', '27', '28', '29', '30',
            '31', '32', '33', '34', '35', '36', '37', '38', '39', '40',
            '41', '42', '43', '44', '45', '46', '47', '48', '49'];
        myChart.setOption({
            title: {
                left: 'center',
                text: '浓度时间曲线',
                textStyle: {
                    fontSize: 18
                },
                subtext: '稳态血药浓度：12.59 mg/L',
                subtextStyle: {
                    fontSize: 12,
                    color: '#333',
                    fontWeight: 'bold'
                },
            },
            xAxis: {
                data: xdata
            },
            //加载数据图表
            series: [{
                // 根据名字对应到相应的系列
                name: '药时曲线',
                data: ydata
            }]
        });
    }else if(patId === 3 || patId == '3') {
        var ydata = [0, 10.49, 10.11, 9.27, 8.47, 7.74, 7.07, 6.47, 15.89, 15.05, 13.78, 12.59, 11.51,
            10.52, 9.61, 18.52, 17.45, 15.97, 14.6, 13.34, 12.19, 11.15, 19.8, 18.62, 17.04, 15.58, 14.24,
            13.01, 11.89, 20.42, 19.19, 17.56, 16.05, 14.67, 13.41, 12.25, 20.73, 19.46, 17.82, 16.28, 14.88,
            13.6, 12.43, 20.87, 19.6, 17.94, 16.4, 14.98, 13.7, 12.52, 20.95, 19.67, 18.0, 16.45, 15.03, 13.74, 12.56];
        var xdata = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10',
            '11', '12', '13', '14', '15', '16', '17', '18', '19', '20',
            '21', '22', '23', '24', '25', '26', '27', '28', '29', '30',
            '31', '32', '33', '34', '35', '36', '37', '38', '39', '40',
            '41', '42', '43', '44', '45', '46', '47', '48', '49', '50',
            '51', '52', '53', '54', '55', '56'];
        myChart.setOption({
            title: {
                left: 'center',
                text: '浓度时间曲线',
                textStyle: {
                    fontSize: 18
                },
                subtext: '稳态血药浓度：12.25 mg/L',
                subtextStyle: {
                    fontSize: 12,
                    color: '#333',
                    fontWeight: 'bold'
                },
            },
            xAxis: {
                data: xdata
            },
            //加载数据图表
            series: [{
                // 根据名字对应到相应的系列
                name: '药时曲线',
                data: ydata
            }]
        });
    } else if(patId === 4 || patId == '4') {
        var ydata = [0, 18.48, 17.81, 16.32, 14.92, 13.64, 12.46, 11.39, 10.41, 9.51, 8.69,
            7.95, 25.12, 23.87, 21.87, 19.99, 18.27, 16.69, 15.26, 13.94, 12.74, 11.65, 10.64,
            27.37, 25.93, 23.75, 21.71, 19.84, 18.13, 16.57, 15.14, 13.84, 12.65, 11.56, 28.14,
            26.63, 24.39, 22.29, 20.37, 18.62, 17.02, 15.55, 14.21, 12.99, 11.87, 28.4, 26.87,
            24.6, 22.49, 20.55, 18.78, 17.17, 15.69, 14.34, 13.11, 11.98, 28.48, 26.95, 24.68,
            22.56, 20.62, 18.84, 17.22, 15.74, 14.38, 13.14, 12.01, 28.51, 26.98, 24.7, 22.58,
            20.64, 18.86, 17.24, 15.75, 14.4, 13.16, 12.03];
        var xdata = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10',
            '11', '12', '13', '14', '15', '16', '17', '18', '19', '20',
            '21', '22', '23', '24', '25', '26', '27', '28', '29', '30',
            '31', '32', '33', '34', '35', '36', '37', '38', '39', '40',
            '41', '42', '43', '44', '45', '46', '47', '48', '49', '50',
            '51', '52', '53', '54', '55', '56', '57', '58', '59', '60',
            '61', '62', '63', '64', '65', '66', '67', '68', '69', '70',
            '71', '72', '73', '74', '75', '76', '77'];
        myChart.setOption({
            title: {
                left: 'center',
                text: '浓度时间曲线',
                textStyle: {
                    fontSize: 18
                },
                subtext: '稳态血药浓度：11.98 mg/L',
                subtextStyle: {
                    fontSize: 12,
                    color: '#333',
                    fontWeight: 'bold'
                },
            },
            xAxis: {
                data: xdata
            },
            //加载数据图表
            series: [{
                // 根据名字对应到相应的系列
                name: '药时曲线',
                data: ydata
            }]
        });
    }


    // $.ajax({
    //       type : "post",
    //       async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
    //       url : "/pat/data?id="+patId,    //请求发送到TestServlet处
    //       data : {},
    //       dataType : "json",        //返回数据形式为json
    //       success : function(result) {
    //           //请求成功时执行该函数内容，result即为服务器返回的json对象
    //           if (result) {
    //                 for(var i=0;i<result.length;i++){
    //                   ydata.push(result[i].num);    //挨个取出销量并填入销量数组
    //                 }
    //                 myChart.hideLoading();    //隐藏加载动画
    //                 myChart.setOption({        //加载数据图表
    //                     series: [{
    //                         // 根据名字对应到相应的系列
    //                         name: '药时曲线',
    //                         data: ydata
    //                     }]
    //                 });
    //
    //           }
    //
    //     },
    //       error : function(errorMsg) {
    //           //请求失败时执行该函数
    //       alert("图表请求数据失败!");
    //       myChart.hideLoading();
    //       }
    // })

    // 使用刚指定的配置项和数据显示图表。

</script>

</html>